<template>
  <div class="cart">
    <Header title="购物车" />
    <div class="cart-content">
      <van-swipe-cell v-for="item in store.cartList" :key="item.goodsId">
        <template #right>
          <van-button
            square
            type="danger"
            text="删除"
            @click="delGoods(item.cartItemId)"
            class="delBtn" />
        </template>
        <template #default>
          <div class="goods">
            <van-checkbox v-model="item.checked" checked-color="#1baeae" @change="handleChecked" />
            <van-card
              :num="item.goodsCount"
              :price="item.sellingPrice"
              :title="item.goodsName"
              class="goods-card"
              :thumb="$filters.prefix(item.goodsCoverImg)">
              <template #num>
                <van-stepper
                  integer
                  :min="1"
                  :max="5"
                  v-model="item.goodsCount"
                  @change="onChange(item)" />
              </template>
            </van-card>
          </div>
        </template>
      </van-swipe-cell>
    </div>
    <van-submit-bar
      :price="totalPrice"
      button-text="结算"
      v-show="store.cartList.length"
      @submit="onSubmit">
      <van-checkbox v-model="checkAll" checked-color="#1baeae">全选</van-checkbox>
      <template #tip> 你的收货地址不支持同城送, <span>修改地址</span> </template>
    </van-submit-bar>
  </div>
</template>

<script setup>
  import Header from "@/components/Header.vue"
  import { onMounted } from "vue"
  import { useCartStore } from "@/store/cartStore"
  import { computed } from "vue"
  import { showConfirmDialog } from "vant"
  let store = useCartStore()
  onMounted(() => {
    //初始化购物车数据
    store.getCartInfo()
  })

  //步进器
  let onChange = item => {
    store.asyncUpdateCartNum({ cartItemId: item.cartItemId, goodsCount: item.goodsCount })
  }
  //商品选中
  let handleChecked = () => {
    //接口不支持保存checked状态
  }
  //删除商品
  let delGoods = id => {
    showConfirmDialog({
      title: "删除提示",
      message: "确认删除吗？",
    })
      .then(() => {
        store.asyncdelGoods(id)
      })
      .catch(() => {
        // on cancel
      })
  }
  //计算总价
  let totalPrice = computed(() => {
    return store.cartList.reduce((prev, next) => {
      return (prev += next.checked ? next.goodsCount * next.sellingPrice * 100 : 0)
    }, 0)
  })
  //全选
  let checkAll = computed({
    get() {
      return store.cartList.every(item => item.checked)
    },
    set(val) {
      return store.cartList.forEach(item => (item.checked = val))
    },
  })
  let onSubmit = () => {}
</script>

<style scoped lang="less">
  @import "@/assets/css/public.less";

  .cart {
    padding-bottom: 120px;
    .van-submit-bar {
      margin-bottom: 50px;
    }
    .cart-content {
      .goods {
        display: flex;
        margin: 2px 0;
      }
      .van-checkbox {
        padding: 0 10px;
      }
      .van-card__price {
        font-size: 16px;
        color: red;
        line-height: 28px;
      }
      .van-card {
        width: 100%;
        margin-top: 0px;
      }
      .delBtn {
        height: 100%;
      }

      /deep/.van-card__price {
        color: red;
      }
    }
  }
</style>
